<template>
  <view class="goods-detail">
    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">商品名称</text>
          <text class="info-value">{{ goodsInfo.goodsName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">商品分类</text>
          <text class="info-value">{{ getCategoryText(goodsInfo.goodsCategory) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">计量单位</text>
          <text class="info-value">{{ goodsInfo.unit }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">状态</text>
          <text class="info-value" :class="'status-' + goodsInfo.status">
            {{ goodsInfo.status === '0' ? '正常' : '停用' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 产地信息 -->
    <view class="info-section" v-if="hasOrigin">
      <view class="section-title">产地信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">产地</text>
          <text class="info-value">{{ getFullOrigin() }}</text>
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="info-section">
      <view class="section-title">其他信息</view>
      <view class="info-list">
        <view class="info-item" v-if="goodsInfo.sortOrder !== null && goodsInfo.sortOrder !== undefined">
          <text class="info-label">排序号</text>
          <text class="info-value">{{ goodsInfo.sortOrder }}</text>
        </view>
        <view class="info-item" v-if="goodsInfo.createTime">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ goodsInfo.createTime }}</text>
        </view>
        <view class="info-item" v-if="goodsInfo.updateTime">
          <text class="info-label">更新时间</text>
          <text class="info-value">{{ goodsInfo.updateTime }}</text>
        </view>
      </view>
    </view>

    <!-- 备注信息 -->
    <view class="info-section" v-if="goodsInfo.remark">
      <view class="section-title">备注信息</view>
      <view class="remark-content">
        <text class="remark-text">{{ goodsInfo.remark }}</text>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="btn-edit" @click="editGoods">编辑</button>
      <button class="btn-delete" @click="confirmDelete">删除</button>
    </view>
  </view>
</template>

<script>
import { getGoods, delGoods } from '@/api/business/goods.js'

export default {
  data() {
    return {
      goodsId: null,
      goodsInfo: {
        goodsName: '',
        goodsCategory: '',
        unit: '',
        originProvince: '',
        originCity: '',
        originDistrict: '',
        sortOrder: 0,
        status: '0',
        remark: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  computed: {
    hasOrigin() {
      return this.goodsInfo.originProvince || 
             this.goodsInfo.originCity || 
             this.goodsInfo.originDistrict
    }
  },
  onLoad(options) {
    if (options.id) {
      this.goodsId = options.id
      this.loadGoodsInfo()
    }
  },
  methods: {
    // 加载商品信息
    async loadGoodsInfo() {
      try {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        
        const response = await getGoods(this.goodsId)
        
        if (response.code === 200 && response.data) {
          this.goodsInfo = response.data
        }
      } catch (error) {
        console.error('加载商品信息失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none',
          duration: 2000
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 获取分类文本
    getCategoryText(category) {
      const categoryMap = {
        '0': '种植业',
        '1': '养殖业',
        '2': '畜牧业'
      }
      return categoryMap[category] || '未知'
    },

    // 获取完整产地
    getFullOrigin() {
      let origin = []
      if (this.goodsInfo.originProvince) origin.push(this.goodsInfo.originProvince)
      if (this.goodsInfo.originCity) origin.push(this.goodsInfo.originCity)
      if (this.goodsInfo.originDistrict) origin.push(this.goodsInfo.originDistrict)
      return origin.join(' ') || '未设置'
    },

    // 编辑商品
    editGoods() {
      uni.navigateTo({
        url: `/pages/goods/edit?id=${this.goodsId}`
      })
    },

    // 确认删除
    confirmDelete() {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除商品"${this.goodsInfo.goodsName}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            await this.deleteGoods()
          }
        }
      })
    },

    // 删除商品
    async deleteGoods() {
      try {
        const response = await delGoods(this.goodsId)
        if (response.code === 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000
          })
          
          // 设置刷新标记
          const pages = getCurrentPages()
          const prevPage = pages[pages.length - 2]
          if (prevPage) {
            prevPage.needRefresh = true
          }
          
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: response.msg || '删除失败',
            icon: 'none',
            duration: 2000
          })
        }
      } catch (error) {
        console.error('删除商品失败:', error)
        uni.showToast({
          title: '删除失败',
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>
.goods-detail {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 信息区块 */
.info-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 16rpx;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #52c41a;
  border-radius: 3rpx;
}

/* 信息列表 */
.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #999;
  min-width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  text-align: right;
}

.info-value.status-0 {
  color: #52c41a;
}

.info-value.status-1 {
  color: #ff4d4f;
}

/* 备注内容 */
.remark-content {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.remark-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.btn-edit, .btn-delete {
  flex: 1;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  border: none;
}

.btn-edit {
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: #fff;
}

.btn-delete {
  background-color: #fff;
  color: #ff4d4f;
  border: 2rpx solid #ff4d4f;
}
</style>